<template>
  <indexMerge>
    <div class="xtx-goods-page" v-if="goodData">
      <div class="container">
        <!-- 面包屑 -->
        <XtxBread>
          <XtxBreadItem path="/">首页</XtxBreadItem>
          <XtxBreadItem :path="`/category/${goodData.categories[1].id}`">
            {{ goodData.categories[1].name }}
          </XtxBreadItem>
          <XtxBreadItem :path="`/category/${goodData.categories[0].id}`">
            {{ goodData.categories[0].name }}
          </XtxBreadItem>
          <XtxBreadItem>{{ goodData.name }}</XtxBreadItem>
        </XtxBread>
        <!-- 商品信息 -->
        <div class="goods-info">
          <!-- 左侧 -->
          <div class="media">
            <GoodsImages :images="goodData.mainPictures" />
            <GoodsSales />
          </div>
          <!-- 右侧 -->
          <div class="spec">
            <GoodsInfo :goods="goodData" />
            <!-- 规格组件 -->
            <GoodsSku
              :specs="goodData.specs"
              :skus="goodData.skus"
              @handleBackCome="handleBackCome"
            />
            <!-- 数量选择组件 -->
            <XtxNumberBox
              v-model="count"
              :max="goodData.inventory"
              :label="'数量'"
            />
            <!-- 加入购物车 -->
            <XtxButton type="primary" :style="{ 'margin-top': '20px' }">
              加入购物车
            </XtxButton>
          </div>
        </div>
        <!-- 商品推荐 -->
        <GoodsRelevant :goodId="goodData.id"></GoodsRelevant>
        <!-- 商品详情 -->
        <div class="goods-footer">
          <div class="goods-article">
            <!-- 商品+评价 -->
            <div class="goods-tabs">
              <GoodsTab />
            </div>
            <!-- 注意事项 -->
            <div class="goods-warn">
              <GoodsWarn />
            </div>
          </div>
          <!-- 24热榜 -->
          <div class="goods-aside">
            <GoodsHot :type="'1'" />
            <GoodsHot :type="'2'" />
            <GoodsHot :type="'3'" />
          </div>
        </div>
      </div>
    </div>
  </indexMerge>
</template>

<script>
import GoodsRelevant from "../../components/goods/GoodsRelevant";
import indexMerge from "../../components/currency/indexMerge";
import GoodsImages from "../../components/goods/GoodsImages";
import GoodsSales from "../../components/goods/GoodsSales";
import GoodsInfo from "../../components/goods/GoodsInfo";
import GoodsSku from "../../components/goods/GoodsSku";
import GoodsTab from "../../components/goods/GoodsTab";
import GoodsHot from "../../components/goods/GoodsHot";
import GoodsWarn from "../../components/goods/GoodsWarn";
import { provide, ref } from "vue";
import { useRoute } from "vue-router";
import { getGoodsOne } from "../../api/goods";

export default {
  name: "GoodsDetailPage",
  components: {
    GoodsRelevant,
    indexMerge,
    GoodsImages,
    GoodsSales,
    GoodsInfo,
    GoodsSku,
    GoodsTab,
    GoodsHot,
    GoodsWarn,
  },
  setup() {
    // 商品详情（新老价格，库存）
    let goodData = getGoodsItem();
    // console.log(goodData.value);
    provide("goodData", goodData);
    // 定义数量组件的数量
    let count = ref(1);

    // 获取来自 GoodsSku 的规格数据返回
    const handleBackCome = (value) => {
      // console.log(value);
      goodData.value.inventory = value.inventory;
      goodData.value.oldPrice = value.oldPrice;
      goodData.value.price = value.price;
    };

    return {
      goodData,
      handleBackCome,
      count,
    };
  },
};

// 获取当前商品详情
function getGoodsItem() {
  const route = useRoute();
  // 存放返回的所有商品详情数据
  let goodData = ref();

  aa(route.params.id);

  // 发起请求获取数据
  function aa(id) {
    getGoodsOne(id).then((res) => {
      goodData.value = res.result;
      // console.log(goodData.value);
    });
  }

  return goodData;
}
</script>

<style scoped lang="less">
.goods-info {
  min-height: 600px;
  background: #fff;
  display: flex;

  .media {
    width: 580px;
    height: 600px;
    padding: 30px 50px;
  }

  .spec {
    flex: 1;
    padding: 30px 30px 30px 0;
  }
}

.goods-footer {
  display: flex;
  margin-top: 20px;

  .goods-article {
    width: 940px;
    margin-right: 20px;
  }

  .goods-aside {
    width: 280px;
    min-height: 1000px;
  }
}

.goods-tabs {
  min-height: 600px;
  background: #fff;
}

.goods-warn {
  min-height: 600px;
  background: #fff;
  margin-top: 20px;
}
</style>
